<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆页</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/base.css">
    <style>
        .sm-pop-inner {
            position: relative !important;
            width: 100%;
        }
        .nc_wrapper {
            width: 100% !important;
        }
    </style>
</head>
<body>
<!--头部部分-->
<div class="header">
    <div class="layui-container">
        <ul class="layui-nav">
            <li class="layui-nav-item"><a href="">陈平Blog</a></li>
            <li class="layui-nav-item"><a href="">应用市场</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>
</div>
<br>
<!--主体内容-->
<div class="body">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md4 layui-col-md-offset3">
                <div>
                    <h2>
                        <strong>登陆</strong>
                        <span style="font-size: 14px;color: #999;padding-left: 10px;">(欢迎登录新西南教育)</span>
                    </h2>
                    <br>
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="">
                                <input type="text" name="username" required  lay-verify="required" placeholder="姓名 | 手机" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="">
                                <input type="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="">
                                <!--No-Captcha渲染的位置，其中 class 中必须包含 nc-container-->
                                <div id="your-dom-id1" class="nc-container"></div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="">
                                <button class="layui-btn layui-col-md12" lay-submit lay-filter="*" style="background-color: #003586!important;">立即提交</button>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div style="float: left;">
                                <span>还没有帐号？</span>
                                <a href="javascript:alert_login();" style="color: red">登录</a>
                            </div>

                            <div style="float: right;">
                                <a href="" >忘记密码？</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
<script src="js/base.js"></script>
<script type="text/javascript">
    layui.use(["jquery","layer"],function () {
        var $ = layui.jquery,layer=layui.layer;
        // 实例化nc
        AWSC.use("nc", function (state, module) {
            // 初始化
            window.nc = module.init({
                // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
                appkey: '{$appkey}',
                //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
                scene: "nc_login",
                // 声明滑动验证需要渲染的目标ID。
                renderTo: "#your-dom-id1",
                //隐藏验证时的错误码
                hideErrorCode:true,
                //滑动条的宽度（单位：px）。默认值为300
                width:"100%",
                //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
                success: function (data) {
                    //服务端通信
                    $.ajax({
                        type:'post',
                        url:'',
                        dataType:'json',
                        data:{
                            sessionId : data.sessionId,
                            token : data.token,
                            sig : data.sig,
                            scene :'nc_login',
                            verifyCode:1
                        },
                        success:function (res) {
                            if(res.code=='1'){
                                $("input[name='nc_token']").val(data.token)
                            }
                        },
                        error:function () {
                            layer.msg("网络请求有误请稍后再试！")
                        }
                    })
                },
                // 滑动验证失败时触发该回调参数。
                fail: function (failCode) {
                    window.console && console.log(failCode)
                },
                // 验证码加载出现异常时触发该回调参数。
                error: function (errorCode) {
                    window.console && console.log(errorCode)
                }
            });
        })
    })
</script>
</body>
</html>